<template>
  <div id='content'>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>绩效管理</el-breadcrumb-item>
      <el-breadcrumb-item>绩效审批</el-breadcrumb-item>
    </el-breadcrumb>
    <div id='form'>
      <el-form ref="form" :model="form" label-width="80px">
        <div class='myInput'>
          <el-form-item label="流水号:">
            <el-input v-model="form.num"></el-input>
          </el-form-item>

          <el-form-item label="姓名:">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="所属部门:">
            <el-select v-model="form.department_name" placeholder="请选择">
              <el-option label="人事部" value="人事部"></el-option>
              <el-option label="行政部" value="行政部"></el-option>
              <el-option label="财务部" value="财务部"></el-option>
              <el-option label="销售部" value="销售部"></el-option>
              <el-option label="市场部" value="市场部"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class='myInput'>
          <div class="block">
            <span class="demonstration">操作时间:</span>
            <el-date-picker v-model="form.audit_time" type="daterange" range-separator="至" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <div id="operation">
            <el-row>
              <el-button type="primary" @click="onSerch">查询</el-button>
              <!-- <el-button type="primary" @click="dialogVisible = true">新增</el-button> -->
              <el-button @click="onResize">重置</el-button>
            </el-row>
          </div>
        </div>

        <el-divider></el-divider>

        <div id='table'>
          <el-table :data="showPage" stripe style="width: 100%">
            <el-table-column prop="num" label="流水号" width="200">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="150">
            </el-table-column>
            <el-table-column prop="department_name" label="所属部门" width="150">
            </el-table-column>
            <el-table-column prop="nper" label="考核周期" width="200">
            </el-table-column>
            <el-table-column prop="link" label="当前环节" width="200">
            </el-table-column>
            <el-table-column prop="reviewer" label="审核人" width="200">
            </el-table-column>
            <el-table-column prop="audit_time" label="操作时间">

            </el-table-column>
          </el-table>
        </div>
        <div class="block" id='page'>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[5, 10, 15, 20]" :page-size="count" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>

      </el-form>

    </div>

  </div>

</template>
<script>
export default {
  data() {

    return {
      value1: '',
      form: {
        audit_time: ['', ''],
        num: '',
        name: '',
        department_name: '',
      },
      editorContent: '',
      tableData: [],
      currentPage4: 1,
      total: 0,
      count: 5,
      page: 1,
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    handleCurrentChange(n) {
      this.page = n
    },
    handleSizeChange(n) {
      this.count = n
    },
    handleClose() {

    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 获取后台数据
    getAchievements() {
      this.$axios({
        url: '/achievements/getAchievements',
      }).then((res) => {
        // console.log(res.data.data);
        this.tableData = res.data.data
        this.total = this.tableData.length
      })
    },
    // 查询
    onSerch() {
      console.log(this.form);
      this.$axios({
        url: '/achievements/postSeach',
        method: 'post',
        data: {
          data: this.form
        }
      }).then((res) => {
        this.tableData = res.data.data
        this.total = this.tableData.length
      })
    },
    // 重置
    onResize() {
      this.form = {
        audit_time: ['', ''],
        num: '',
        name: '',
        department_name: '',
      };
      this.getAchievements();
      this.page = 1;
      this.count = 5
    }
  },
  mounted() {
    this.getAchievements()
  },
  computed: {
    showPage() {
      return this.tableData.slice((this.page - 1) * this.count, this.page * this.count)
    }

  }
}
</script>

<style scoped>
.text {
  border: 1px solid #ccc;
  height: 40px;
}
#form {
  background-color: white;
  margin-top: 30px;
}
.el-input {
  width: 300px;
  margin-right: 20px;
}
.myInput {
  display: flex;
  padding-top: 20px;
}
#page {
  text-align: right;
  margin-top: 30px;
}
.demonstration {
  font-size: 14px;
  color: #606266;
  margin-left: 30px;
  margin-right: 10px;
}
hr {
  margin: 30px 0;
  border: 1px solid #f2f2f2;
}
#operation {
  text-align: right;
  margin-right: 20px;
}
#details span:first-child {
  color: red;
  margin-left: 50px;
}
#operation {
  flex: 1;
}
</style>